<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/category.html.css">
  <link rel="stylesheet" href="css/head_bottom.css">
  <title></title>
</head>
<body onload="search_cake(1)">
  <header id="global_header">
    <div class="fix_header">
      <div class="logo">
        <img src="img/yhxe.png" alt="">
      </div>
      <nav class="global_nav">
        <ul class="nav_ul">
          <li><a href="index.html" target="_parent" class="left">首页</a></li>
          <li><a href="category.html" id="a_cake" onclick="search_cake()" class="left">蛋糕</a></li>
          <li><a href="snacks.html" class="left">零食</a></li>
          <li><a href="#" class="left">积分兑换</a></li>
        </ul>
      </nav>
      <div class="right_content">
        <div>
          <a href="shoppingCart.html" target="_blank"><img src="img/20201214231042.png" alt=""></a>
        </div>
        <div>
          <a href="login.html" target="_blank"><img src="img/20201214230952.png" alt=""></a>
        </div>
      </div>
    </div>
  </header>
  <div style="height: 90px"></div>
  <div id="main">
    <div class="coke_main">
      <div>
        <img  class="top_img" src="img/A76769935E26C2479483BAE531676B47.jpg" alt="">
      </div>
      <div class="wrap">
        <div id="_tastes"></div>
      </div>
      <div  class="cake_product">
        <ul id="product">
        </ul>
      </div>
    </div>
  </div>
  <!--  页脚部分-->
  <footer>
    <div class="footer_content">
      <div class="footer_left">
        <div class="footer_nav">
          <a href="#">小e公告</a>
          <a href="#">关于小e</a>
          <a href="#">客服服务</a>
          <a href="#">食品经营许可证</a>
          <a href="#">生产许可证</a>
          <a href="#">预付费卡协议</a>
          <a href="#">联系我们</a>
        </div>
        <p class="footer-tel"><span>如有问题，请联系在线客服。工作时间：9：00-21:00</span></p>
        <div class="footer_copy">
          <p>
            <span>copyright©2010-2020 xiaoe.com版权所有</span><span>沪ICP备10211730号</span><span>沪公网安备31010402003364号</span>
          </p>
        </div>
      </div>
      <div class="footer_img">
        <table></table>
        <div class="bottom_image1"><img src="img/20201221131321.jpg" ></div>
        <div class="bottom_image2"><img src="img/20201215215306.png" ></div>
      </div>
    </div>
  </footer>

  <!--	js脚本-->
  <script>
    //查询出所有蛋糕的数据
      function search_cake(cg){
          let xhr=new XMLHttpRequest();
          xhr.onreadystatechange=function(){
              if(xhr.readyState===4 && xhr.status===200){
                  let r = JSON.parse(xhr.responseText);
                  let _ul='';
                  for(let i=0;i<r.length;i++) {
                    _ul += `
                        <li class="p_item">
                        <div class="p_item_div">
                          <div class="img_div"><a target="_blank" href="detail_pages.html?${r[i].pid}">
                            <img class="product_img" src="./img/${r[i].sm}"></a>
                          </div>
                          <div class="p_info">
                            <a class="product_name" target="_blank" href="detail_pages.html?${r[i].pid}">${r[i].name}</a>
                            <p class="product_title">${r[i].title}</p>
                            <p class="product_price">￥${r[i].price}</p>
                            <span class="go_cart"><a href="">加入购物车></a></span>
                          </div>
                        </div>
                        </li>`
                  }
                  product.innerHTML=_ul;
                  tastes();
              }
          };
          xhr.open('get',`/index/search_cake/${cg}`,true);
          xhr.send();
      };
      //生成分类口味分类按钮
      function tastes(){
        let tastes=['雪域特浓','雪域口味','巧克力味','芝士口味','鲜果口味','奶油口味','慕斯口味'];
        let _ta=`
           <ul>
             <li class='title_li' active>口味：</li>
             <li><a href="javascript:void(0)" onclick="search_cake(1)">全部</a></li>
              `;
        for(let i=0;i<tastes.length;i++){
          _ta+=`<li><a href="javascript:void(0)" onclick="showCake(${(i+1)*10})">${tastes[i]}</a></li>`;
        }
        _ta+='</ul>';
        _tastes.innerHTML=_ta;
      }
      //根据蛋糕口味分类展示商品数据
      function showCake(tastes){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
          if(xhr.readyState===4 && xhr.status===200){
            let r = JSON.parse(xhr.responseText);
            let _ul='';
            for(let i=0;i<r.length;i++){
              _ul += `
                <li class="p_item">
                <div class="p_item_div">
                  <div class="img_div"><a target="_blank" href="detail_pages.html?${r[i].pid}">
                    <img class="product_img" src="./img/${r[i].sm}"></a>
                  </div>
                  <div class="p_info">
                    <a target="_blank" href="detail_pages.html?${r[i].pid}">${r[i].name}</a>
                    <p class="product_title">${r[i].title}</p>
                    <p class="price">￥${r[i].price}</p>
                    <span>加入购物车></span>
                  </div>
                </div>
                </li>`
            }
            product.innerHTML=_ul;

          }
        }
        xhr.open('get',`/index/tastes_cake/${tastes}`,true);
        xhr.send();
      };
      function changeCss(obj){
        let alist=doc.getElementsByTagName("a");
        for(let i=0;i<alist.length;i++){
          alist[i].style.color
        }
      }
  </script>
</body>
</html>